<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>系统首页</h1>
      <p>欢迎回来，今天是 {{ currentDate }}</p>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon sales">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <h3>今日销售额</h3>
              <p class="stat-value">¥{{ formatCurrency(todaySales) }}</p>
              <span class="stat-trend up">
                <el-icon><CaretTop /></el-icon>
                12.5%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon orders">
              <el-icon><ShoppingCart /></el-icon>
            </div>
            <div class="stat-info">
              <h3>今日订单</h3>
              <p class="stat-value">{{ todayOrders }}</p>
              <span class="stat-trend up">
                <el-icon><CaretTop /></el-icon>
                8.2%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon products">
              <el-icon><Goods /></el-icon>
            </div>
            <div class="stat-info">
              <h3>商品总数</h3>
              <p class="stat-value">{{ totalProducts }}</p>
              <span class="stat-trend neutral">-</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon customers">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <h3>客户总数</h3>
              <p class="stat-value">{{ totalCustomers }}</p>
              <span class="stat-trend up">
                <el-icon><CaretTop /></el-icon>
                5.3%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表和待办事项 -->
    <el-row :gutter="20" class="dashboard-content">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              />
            </div>
          </template>
          <div class="chart-container">
            <canvas ref="salesChart" width="400" height="200"></canvas>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>待办事项</span>
          </template>
          <div class="todo-list">
            <div
              v-for="item in todoList"
              :key="item.id"
              class="todo-item"
              :class="{ completed: item.completed }"
            >
              <el-checkbox v-model="item.completed" />
              <span class="todo-content">{{ item.content }}</span>
              <el-tag :type="item.priority === 'high' ? 'danger' : 'warning'" size="small">
                {{ item.priority === 'high' ? '紧急' : '重要' }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 快捷操作 -->
    <el-row :gutter="20" class="quick-actions">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="action-buttons">
            <el-button type="primary" @click="$router.push('/products/add')">
              <el-icon><Plus /></el-icon>
              添加商品
            </el-button>
            <el-button type="success" @click="$router.push('/orders')">
              <el-icon><Document /></el-icon>
              查看订单
            </el-button>
            <el-button type="warning" @click="$router.push('/finance')">
              <el-icon><Money /></el-icon>
              财务报表
            </el-button>
            <el-button type="info" @click="$router.push('/analytics')">
              <el-icon><DataAnalysis /></el-icon>
              数据分析
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 模拟数据
const todaySales = ref(12580.50)
const todayOrders = ref(89)
const totalProducts = ref(1247)
const totalCustomers = ref(856)

const dateRange = ref([])
const todoList = ref([
  { id: 1, content: '处理待发货订单 #2024001', priority: 'high', completed: false },
  { id: 2, content: '审核新上架商品', priority: 'normal', completed: false },
  { id: 3, content: '更新库存信息', priority: 'high', completed: true },
  { id: 4, content: '回复客户咨询', priority: 'normal', completed: false }
])

const currentDate = computed(() => {
  const date = new Date()
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

const formatCurrency = (value) => {
  return value.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

onMounted(() => {
  // 这里可以初始化图表
  console.log('Dashboard mounted')
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.dashboard-header {
  margin-bottom: 20px;
}

.dashboard-header h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.dashboard-header p {
  color: #666;
  font-size: 14px;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon.sales {
  background-color: #ecf5ff;
  color: #409eff;
}

.stat-icon.orders {
  background-color: #f0f9ff;
  color: #67c23a;
}

.stat-icon.products {
  background-color: #fff7e6;
  color: #e6a23c;
}

.stat-icon.customers {
  background-color: #f6ffed;
  color: #52c41a;
}

.stat-info h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.stat-trend.up {
  color: #67c23a;
}

.stat-trend.down {
  color: #f56c6c;
}

.dashboard-content {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.todo-list {
  max-height: 300px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item.completed .todo-content {
  text-decoration: line-through;
  color: #999;
}

.todo-content {
  flex: 1;
  margin: 0 10px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>
